import React from 'react'
import { cn } from '../../utils/cn'

interface ProgressProps {
  value: number
  max?: number
  className?: string
  color?: 'blue' | 'green' | 'yellow' | 'red'
}

const colorClasses = {
  blue: 'bg-blue-500',
  green: 'bg-green-500',
  yellow: 'bg-yellow-500',
  red: 'bg-red-500'
}

export function Progress({ value, max = 100, className, color = 'blue' }: ProgressProps) {
  const percentage = Math.min((value / max) * 100, 100)

  return (
    <div className={cn(
      "w-full bg-gray-200 rounded-full overflow-hidden",
      className
    )}>
      <div
        className={cn(
          "h-full transition-all duration-300 ease-out",
          colorClasses[color]
        )}
        style={{ width: `${percentage}%` }}
      />
    </div>
  )
}